<template>
  <view class="hire_page">
    <view class="header">
      <view class="_w-max _top _left _z-index-2 _pos-fixed _top _left"  :style="{ 'background-color': 'rgba(0, 0, 0,' + srollOpacity + ')' }">
        <view :style="{ width: '100%', height: recHeight }"></view>
        <view class="felx_c h_96 f_s_18"  :style="{ color: 'rgb(' + srollColor + ','  + srollColor + ',' + srollColor +')'}"><image class="back-img" src="./static/back.png" mode="" @tap="goBack" />积分商城</view>
      </view>
      <view class="integral-box">
        <view class="detail">我的积分</view>
        <view class="num">{{userInfo.integral || 0}}</view>
      </view>
      <view class="integral-rule-box">
        <view class="rule-title" @tap="handleIntegralRule"><image class="tips-img" src="./static/tips.png" mode="" />积分规则</view>
        <view class="btn" @tap="handleMyExchange">我的兑换</view>
      </view>
      <image class="integral-hd-img" src="./static/hd.png" mode="" />
    </view>
    <view class="container">
        <view class="integral-mall-box">
            <view class="list" v-if="productList.length > 0">
                <view class="item" v-for="(item, index) in productList" :key="index">
                  <image class="goods-img" :src="item.image" />
                  <view class="title">{{item.title}}</view>
                  <view class="bottom">
                      <view class="left">
                        <image class="integral-img" src="./static/integral.png" mode="" />
                        <view class="title">{{item.price}}</view>
                      </view>
                      <view class="btn" @tap="handleExchange(item.id)">兑换</view>
                  </view>
                </view>
            </view>
            <view class="no-data-box" v-if="productList.length == 0">
              <image src="./static/no_data.png" class="no-data-img" />
              <view class="text">暂无可兑换商品</view>
            </view>
        </view>
    </view>
    
    <uni-popup ref="popup" type="center" border-radius="40px 40px 40px 40px">
      <view class="sign-popup-box">
        <image class="integral-img3" src="./static/sign_in_intergal3.png" mode="" />
        <view class="title">恭喜您获得10积分</view>
        <view class="desc">已连续签到 1天</view>
        <view class="btn">确认</view>
        <image class="integral-img4" src="./static/sign_in_intergal4.png" mode="" />
      </view>
      <image class="integral-close-img" src="./static/sign_in_intergal_close.png" mode="" @tap="goClosePopup" />
    </uni-popup>
    
    <uni-popup ref="rulePopup" type="center" border-radius="24px 24px 0px 0px">
     <view class="integral-rule-popup">
        <view class="hd">
          积分规则
          <image class="integral-rule-close-img" src="./static/integral_rule_close.png" mode="" @tap="goCloseDrawer" />
        </view>
        <view class="bd">
          <view>积分方式 </view>
          <view>凡是在租车下单之后可以获得相应积分:1元累计1分，累计积分可享受积分抵现、积分换礼品。</view>
          <view>积分计算方法</view>
          <view>商城的积分获取分为两个部分:消费积分和奖励积分 </view>
          <view>1.消费积分 客户消费积分换算方法为:消费积分以1元为最小单位。每消费满1元累积1分，不满1元，不累积。</view> 
          <view>(1)积分计算以实际付款金额为准</view>
          <view>(2) 客户消费金额中，不满1元部分不进行前后累计积分; </view>
          <view>(3) 客户消费当天记入积分，消费金额所产生的积分均在公司记账日的次日生效: </view>
          <view>(4)如发生退款，将从积分中扣除退款金额相对应的积分</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import { getAllCity } from '@/api/car.js'
import { getStoreIntegralList } from '@/api/activity.js';
	import {
		integralOrderConfirm,
		integralOrderCreate,
	} from '@/api/activity.js';
  
	import {
		postSignUser,
		getSignConfig,
		getSignList,
		setSignIntegral,
    getAddressDefault
	} from '@/api/user.js';

const concat = name => 'https://taxi.raxan.xyz/wechat/static/images/hire/' + name

const IMAGES = {
  BANNER: concat('banner.png'),
  NEWMOD: concat('u_xzscx.png'),
  BLUVEH: concat('u_veh_right.png'),
  CONPAN: concat('u_company_veh.png'),
  HIREOT: concat('u_hire_other.png'),
  USECAR: concat('u_use_car.png')
}

const navList = [
  { label: '全部', value: 1 },
  { label: '新能源', value: 2 },
  { label: '轿车', value: 3 },
  { label: 'SUV', value: 4 },
  { label: 'MPV', value: 5 },
  { label: '微面', value: 6 },
]

export default {
  data() {
    return {
      userInfo: {},
      recHeight: 0,
      imgs: IMAGES,
      srollOpacity: 0,
      srollColor: 0,
      integralUseData: [
        {
          title: '订单减免',
          desc: '300积分换1元',
          status: 0,
        },
        {
          title: '积分商城兑换',
          desc: '积分好礼等你换',
          status: 1,
        },
      ],
      signListData: [
        {
          score: '+10',
          date: '11.27',
          status: 1
        },
        {
          score: '+10',
          date: '11.27',
          status: 0
        },
        {
          score: '+10',
          date: '11.27',
          status: 0
        },{
          score: '+10',
          date: '11.27',
          status: 0
        },
        {
          score: '+10',
          date: '11.27',
          status: 0
        },
        {
          score: '+10',
          date: '11.27',
          status: 0
        },{
          score: '+10',
          date: '11.27',
          status: 0
        },
        {
          score: '+10',
          date: '11.27',
          status: 0
        },
        {
          score: '+10',
          date: '11.27',
          status: 0
        },{
          score: '+10',
          date: '11.27',
          status: 0
        },
        {
          score: '+10',
          date: '11.27',
          status: 0
        },
        {
          score: '+10',
          date: '11.27',
          status: 0
        },{
          score: '+10',
          date: '11.27',
          status: 0
        },
        {
          score: '+10',
          date: '11.27',
          status: 0
        },
        {
          score: '+10',
          date: '11.27',
          status: 0
        },{
          score: '+10',
          date: '11.27',
          status: 0
        },
        {
          score: '+10',
          date: '11.27',
          status: 0
        },
        {
          score: '+10',
          date: '11.27',
          status: 0
        },{
          score: '+10',
          date: '11.27',
          status: 0
        }
      ],
      goodsList: [],
      productList: [],
      where: {
      	store_name: '',
      	priceOrder: '',
      	salesOrder: '',
      	page: 1,
      	limit: 20,
      },
      price: 0,
      stock: 0,
      nows: false,
      loadend: false,
      loading: false,
      loadTitle: this.$t(`加载更多`),
      addressId: 0,
      goodsId: '',
    }
  },
  onPageScroll(e) {
    this.srollColor = e.scrollTop < 100 ? 0 - Math.floor(e.scrollTop * 2.55) : 0;
    this.srollOpacity = e.scrollTop < 100 && e.scrollTop >= 20 ? '0.' + Math.floor(e.scrollTop) : e.scrollTop < 20 && e.scrollTop >= 0 ? '0.0' + Math.floor(e.scrollTop) : e.scrollTop;
  },
  onLoad: function(options) {
    this.getPhoneInfo();
    this.getUserInfo();
    this.getDefatultAddress()
    
  	this.where.cid = options.cid || 0;
  	this.$set(this.where, 'sid', options.sid || 0);
  	this.title = options.title || '';
  	this.$set(this.where, 'store_name', options.searchValue || '');
  	this.get_product_list();
  },
  onShow(){
    this.getPhoneInfo();
    this.getUserInfo();
    this.getDefatultAddress()
    this.get_product_list();
  },
  methods: {
    getDefatultAddress(){
      getAddressDefault().then(res => {
      	// this.addressInfo = res.data || {};
      	this.addressId = res.data.id || 0;
      })
    },
    goExchange(id) {
    	let that = this
    	if (!that.addressId) {
    		return that.$util.Tips({
    			title: that.$t(`请设置默认收货地址`)
    		},'/pages/info_setting/common_delivered_info');
    	}
    	// if (parseFloat(that.resData.integral) < parseFloat(that.cartInfo.price))
    	// 	return that.$util.Tips({
    	// 		title: that.$t(`可用积分不足！`)
    	// 	});
      console.log('this.goodsId', this.goodsId)
    	let data = {
    		addressId: this.addressId, // 地址
    		mark: '', // 备注
    		// unique: '',
        id: this.goodsId, // 商品id
    		num: 1 // 数量
    	}
    	integralOrderCreate(data).then(res => {
        console.log('res-----', res)
        // uni.showToast({
        //   title: '兑换成功',
        //   icon: 'none'
        // })
        uni.navigateTo({
          url: `/pages/integral_mall/exchange_success`
        })
    		// uni.redirectTo({
    		// 	url: `/pages/points_mall/integral_order_status?order_id=${res.data.result.orderId}`
    		// })
    	}).catch(err => {
    		uni.hideLoading();
    		return that.$util.Tips({
    			title: err
    		});
    	});
    },
    /**
     * 获取用户信息
     */
    getUserInfo: function() {
    	let that = this;
    	postSignUser({
    		sign: 1
    	}).then(res => {
        this.userInfo = res.data;
        console.log('this.userInfo', this.userInfo)
    	});
    },
    //设置where条件
    setWhere: function() {
    	if (this.price == 0) this.where.priceOrder = '';
    	else if (this.price == 1) this.where.priceOrder = 'asc';
    	else if (this.price == 2) this.where.priceOrder = 'desc';
    	if (this.stock == 0) this.where.salesOrder = '';
    	else if (this.stock == 1) this.where.salesOrder = 'asc';
    	else if (this.stock == 2) this.where.salesOrder = 'desc';
    	this.where.news = this.nows ? 1 : 0;
    },
    //查找产品
    get_product_list: function(isPage) {
    		let that = this;
    		that.setWhere();
    		if (that.loadend) return;
    		if (that.loading) return;
    		if (isPage === true) that.$set(that, 'productList', []);
    		that.loading = true;
    		that.loadTitle = '';
    		getStoreIntegralList(that.where).then(res => {
    			let list = res.data;
    			let productList = that.$util.SplitArray(list, that.productList);
    			let loadend = list.length < that.where.limit;
    			that.loadend = loadend;
    			that.loading = false;
    			that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
    			that.$set(that, 'productList', productList);
    			that.$set(that.where, 'page', that.where.page + 1);
    		}).catch(err => {
    			that.loading = false;
    			that.loadTitle = that.$t(`加载更多`);
    		});
    },
    handleIntegralRule(){
        this.$refs.rulePopup.open('bottom')
    },
    handleMyExchange(){
      uni.navigateTo({
        url: `/pages/integral_mall/my_exchange`
      })
    },
    goBack(){
      uni.navigateBack()
    },
    switch1Change: function (e) {
          console.log('switch1 发生 change 事件，携带值为', e.detail.value)
    },
    checkLoading(fn) {
      uni.showLoading({ title: '加载中' })
      fn().finally(uni.hideLoading)
    },
    // 获取顶部高度信息
    getPhoneInfo() {
      uni.getSystemInfo({
        success: (res) => {
          this.recHeight = res.statusBarHeight + 'px'; //获取手机状态栏高度
        }
      });
    },
    handleExchange(goodsId){
      this.goodsId = goodsId;
      uni.showModal({
          title: '确认兑换',
          content: '确认兑换吗？',
          success:  (res) => {
              if (res.confirm) {
                  console.log('用户点击确定');
                  
                  // uni.navigateTo({
                  //   url: `/pages/integral_mall/exchange_success`
                  // })
                  this.goExchange()
              } else if (res.cancel) {
                  console.log('用户点击取消');
              }
          }
      });
    },
    /**
     * 用户签到
     */
    goSign: function(e) {
    	// let that = this,
    	// 	sum_sgin_day = that.userInfo.sum_sgin_day;
    	// if (that.userInfo.is_day_sgin) return this.$util.Tips({
    	// 	title: that.$t(`您今日已签到!`)
    	// });
    	// setSignIntegral().then(res => {
    	// 	that.active = true;
    	// 	that.integral = res.data.integral;
    	// 	that.sign_index = (that.sign_index + 1) > that.signSystemList.length ? 1 : that
    	// 		.sign_index + 1;
    	// 	that.signCount = that.PrefixInteger(sum_sgin_day + 1, 4);
    	// 	that.$set(that.userInfo, 'is_day_sgin', true);
    	// 	that.$set(that.userInfo, 'integral', that.$util.$h.Add(that.userInfo.integral, res.data
    	// 		.integral));
    	// 	that.getSignList();
    	// }).catch(err => {
    	// 	return this.$util.Tips({
    	// 		title: err
    	// 	})
    	// });
      
      // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
      this.$refs.popup.open('center')
    },
    goClosePopup(){
       this.$refs.popup.close()
    },
    goCloseDrawer(){
      this.$refs.rulePopup.close()
    }
  }
}
</script>
<style lang="scss" scoped>
  .integral-rule-popup{
    padding: 0 32rpx 100rpx 32rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 48rpx;
    background: #FFF;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    .hd{
      position: relative;
      text-align: center;
      padding: 40rpx 0;
      .integral-rule-close-img{
        position: absolute;
        right: 0rpx;
        top: 30rpx;
        width: 48rpx;
        height: 48rpx;
      }
    }
    .bd{
      line-height: 56rpx;
    }
  }
  .sign-popup-box{
    position: relative;
    width: 566rpx;
    padding-bottom: 46rpx;
    background: linear-gradient( 136deg, #E5F2FE 0%, #FFFFFF 44%, #E6EFFE 100%);
    box-shadow: inset 0rpx 4rpx 10rpx 0rpx rgba(153,153,153,0.1);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 2rpx solid #F7FAFC;
    text-align: center;
    .integral-img3{
      width: 175rpx;
      height: 178rpx;
      margin-top: -70rpx;
    }
    .integral-img4{
      width: 160rpx;
      height: 158rpx;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .title{
      font-size: 48rpx;
      color: #8C2508;
      font-weight: bold;
      margin-top: 0rpx;
      margin-bottom: 28rpx;
    }
    .desc{
      font-size: 26rpx;
      color: #8C2508;
    }
    .btn{
      margin: 60rpx auto 0;
      width: 342rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-weight: 600;
      font-size: 26rpx;
      color: #FFFFFF;
      background: linear-gradient( 270deg, #F94846 0%, #FFA952 100%);
      box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(244,53,49,0.25);
      border-radius: 74rpx 74rpx 74rpx 74rpx;
    }
  }
  .integral-close-img{
    display: block;
    width: 38rpx;
    height: 38rpx;
    margin: 28rpx auto 0;
  }
  .back-img{
    position: absolute;
    left: 10rpx;
    width: 48rpx;
    height: 48rpx;
  }
  .header{
    // padding: 0 26rpx;
    height: 460rpx;
    position: relative;
    // background: linear-gradient(180deg, #4C91FA 0%, #F5F5F5 100%);
    // border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .integral-rule-box{
    position: absolute;
    right: 30rpx;
    top: 200rpx;
    z-index: 1;
    .rule-title{
      display: flex;
      align-items: center;
      margin-bottom: 40rpx;
      font-size: 26rpx;
      color: #755121;
      font-weight: 500;
      .tips-img{
        width: 30rpx;
        height: 30rpx;
        margin-right: 8rpx;
      }
    }
    .btn{
      width: 168rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      background: linear-gradient( 90deg, #FFAC4F 0%, #F74343 100%);
      border-radius: 200rpx 200rpx 200rpx 200rpx;
      font-weight: 500;
      font-size: 26rpx;
      color: #FFFFFF;
    }
  }
  .integral-hd-img{
    width: 750rpx;
    height: 460rpx;
  }
  .integral-box{
    position: absolute;
    left: 62rpx;
    top: 240rpx;
    z-index: 1;
    .num{
     font-weight: 600;
     font-size: 64rpx;
     color: #9C571F;
    }
    .detail{
     margin-bottom: 30rpx;
     font-weight: 500;
     font-size: 30rpx;
     color: #755121;
    }
  }
  .integral-img1{
    position: absolute;
    top: 220rpx;
    right: 24rpx;
    width: 324rpx;
    height: 236rpx;
    z-index: 2;
  }

.h_96 { height: 96rpx; }
.c_fff { color: #FFFFFF; }
.f_s_18 { font-size: 36rpx; }

.felx_c {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hire_page {
  box-sizing: border-box;
  position: relative;
  min-height: 100vh;
  background: #F8F9FC;
  color: rgba(0, 0, 0, 0.9);
}

.container{
  width: 750rpx;
  padding: 30rpx;
  box-sizing: border-box;
  margin: 0rpx auto 0;
  .integral-mall-box{
    .list{
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .item{
        width: 336rpx;
        padding: 20rpx 24rpx;
        box-sizing: border-box;
        background: #FFFFFF;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        margin-right: 18rpx;
        margin-bottom: 18rpx;
        &:nth-child(2n){
          margin-right: 0;
        }
        .goods-img{
          width: 100%;
          height: 280rpx;
        }
        .title{
          font-weight: 500;
          font-size: 26rpx;
          color: #191919;
          white-space: nowrap; /* 禁止文本换行 */
          overflow: hidden; /* 隐藏超出范围的内容 */
          text-overflow: ellipsis; /* 使用省略号 */
        }
        .bottom{
          margin-top: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #FFF;
          .left{
            display: flex;
            align-items: center;
          }
          .integral-img{
            width: 48rpx;
            height: 48rpx;
          }
          .title{
            font-weight: 600;
            font-size: 28rpx;
            color: #DE070B;
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .btn{
            width: 88rpx;
            height: 50rpx;
            line-height: 50rpx;
            text-align: center;
            background: #F17F30;
            border-radius: 40rpx 40rpx 40rpx 40rpx;
            font-size: 24rpx;
            color: #FFFFFF;
          }
        }
      }
    }
  }
}

.no-data-box{
  .no-data-img{
    width: 360rpx;
    height: 360rpx;
    display: block;
    margin: 100rpx auto 10rpx;
  }
  .text{
    text-align: center;
    font-size: 26rpx;
    color: #B9B9BD;
  }
}
</style>